
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
<META HTTP-EQUIV="expires" CONTENT="0"> 

<title>英语</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../../assets/css/jquery-ui.custom.min.css" />


<style>
.input-answer {
	color : black;
}

.title2 {
	font-size: 20px;
}

.title3 {
	font-size: 20px;
	cursor: pointer;
	color: red;
}
</style>

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>
		单词小测验 <small> <i class="ace-icon fa fa-angle-double-right"></i>
			步步为营 
		</small>
	</h1>
</div>
<!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">

		<div class="clearfix" >
			 <div id="headerDiv" style="margin: 5px;">
				<div class="title2" >
					<table>
						<tr>
							<td>
								名称:
							</td>
							<td>
								<span id="quizName"></span>
							</td>
						</tr>
						<tr>
							<td>
								备注:
							</td>
							<td>
								<span id="quizRemark"></span>
							</td>
						</tr>
						
					</table>
				</div>
				<div  style="margin-top: 10px;" id="topListDiv" >
					<span class="title2">排名榜 &nbsp;
					 <button class="btn btn-info" type="button" onclick="refreshTopList()">刷新</button> 
					</span>
					<div id="rateDiv" class="title2">
					</div>
				</div>
			</div>
			 <div id="contentDiv">
				<div class="title2">如果长时间不出来，请尝试重新刷新页面
					<button class="btn btn-info" type="button" onclick="newOneFreeQuiz()">
							刷新
					</button>
				</div>
			</div>
			 <div >
				<button id="submitBtn" class="btn btn-info" type="button" onclick="checkAnswers0()">
						<i class="ace-icon fa fa-check bigger-110"></i>
						提交
				</button>
				<span id="newOneMoreSpan" style="display: none">
					&nbsp;
					<button class="btn btn-info" type="button" onclick="newOneFreeQuiz()">
							再来一组
					</button>
				</span>
				&nbsp;
				<button class="btn btn-info" type="button" onclick="backToList()">
						返回
				</button>
			</div>
			 <div id="otherInfo" style="padding: 5px;display: none" class="title2" >
			 	您今天的测试题(收藏的单词)都已做完了，想学习更多吗？你有如下途径：
			 	<div>
			 	1.<a href="ajax.html#page/otherswords">看看别人的单词</a>，然后收藏单词，
			 	</div>
			 	<div>
			 	1.<a href="ajax.html#page/articles2Others">看看别人的素材</a>，然后收藏单词，
			 	</div>
			 	<div>
			 	1.<a href="ajax.html#page/newArticle">创建素材</a>，然后收藏单词，
			 	</div>
			 	<div>
			 	2.做<a href="ajax.html#page/quizs">测验列表</a>里的测验题
			 	</div>
			</div>
			<div id='submitResultDiv' style="color: red"></div>
			<div id='resultDiv'></div>
			<span id="newOneMoreSpan2" style="display: none">
				&nbsp;
				<button class="btn btn-info" type="button" onclick="newOneFreeQuiz()">
						再来一组
				</button>
				&nbsp;
				<button class="btn btn-info" type="button" onclick="backToList()">
						返回
				</button>
			</span>
		</div>
		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->

<!-- page specific plugin scripts -->

<!--[if lte IE 8]>
  <script src="../../assets/js/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript">
	var totalSize = 0;
	var qid = 0;
	var password = 0;
	var ajaxQuizData = null;
	var scripts = [ null, "../../assets/js/jquery-ui.custom.min.js",
			"../../assets/js/chosen.jquery.min.js",
			"../../assets/js/jquery.maskedinput.min.js",
			"../../assets/js/bootbox.min.js",
			  null ]
	ace.load_ajax_scripts(
					scripts,
					function() {
						//inline scripts related to this page
						jQuery(function($) {
							//alert("aa:" + GetArgsFromHref(window.location.href, "aa"));
							//alert("c:" + GetArgsFromHref(window.location.href, "c"));
							
							fillQuizList();
							
							/*
							mySwiper = new Swiper('.swiper-container', {
								pagination : '.pagination',
								paginationClickable : true,
								onSlideChangeEnd: function(swiper){
									//console.log("swiper.activeIndex:" + swiper.activeIndex);
									//$('#input' + (swiper.activeIndex)).focus();
							    }
							})
							*/
						});
					});
	
	function fillQuizList() {
		$("#contentDiv").html("");
		password = GetArgsFromHref(window.location.href, "password");
		qid = GetArgsFromHref(window.location.href, "qid");
		qid = qid.replace("#page/freeQuiz", "");
		console.log("qid:" + qid);
		initQuizInfo(qid, password);
		var destUrl = "";
		if(qid == "") {
			destUrl = "../../getWordListForQuiz";
		} else {
			destUrl = "../../getWordListForQuiz2?id=" + qid + "&password=" +　password;
		}
		
		if(qid == "") {
			//$("#newOneMoreSpan").show();
			$("#topListDiv").hide();
		} else{
			//$("#newOneMoreSpan").hide();
			$("#topListDiv").show();
		}
		
		$.ajax({
			type : "POST",
			url : destUrl,
			cache:false,
			async : false,
			dataType : "json",
			success : function(data) {
				var contentsInfo = "";
				ajaxQuizData = data;
				totalSize = data.length;
				for(var i = 0; i < data.length; i++) {
					var oneWordHtml = "";
					oneWordHtml += "<div style='border: 3px dashed #ccc;margin-top:5px;'   id='quizSpan" + i  + "'><div class='title2'><p>";
					oneWordHtml += "     <b>" + (i + 1) + "/" + totalSize + "</b>." + data[i].sentence;
					//oneWordHtml += "     <span class='title3' onclick='toggleForkSen(this, " + data[i].senId + ")'>&nbsp;<i class='ace-icon glyphicon glyphicon-star-empty'></i></span>";
					oneWordHtml += "     </p>";
					oneWordHtml += "     <span style='display:none;' id='resultSpan" + i  + "'><img src='../../assets/images/icon_bad.gif' /></span>";
					oneWordHtml += "     <p>";
					oneWordHtml += "     " + data[i].explain2 + "&nbsp;"
					if(qid == "") {
						oneWordHtml +=           '<button class="btn btn-info" type="button" onclick="ignoreWord(this, ' + data[i].wordId + ',' + i + ')">忽略</button>' ;
					}
					oneWordHtml += "     </p>";
					if(data[i].comment != "" && data[i].comment != null) {
						oneWordHtml += "     <p>";
						oneWordHtml += "     备注:" + data[i].comment;
						oneWordHtml += "     </p>";
					}
					oneWordHtml += "     <span style='display:none;' id='answerSpan" + i  + "'>" + data[i].answer + "</span>";
					oneWordHtml += "     <span style='display:none;' id='wordIdSpan" + i + "'>" + data[i].wordId  + "</span>";
					oneWordHtml += "     </div>";
					oneWordHtml += "     </div>";
					contentsInfo += oneWordHtml;
					//	In b<input id="input1" type="input" />
				}
				
				
				$("#contentDiv").html(contentsInfo);
				
				if(totalSize == 0) {
					$("#otherInfo").show();
					$("#submitBtn").hide();
				}
				
				
				$.mask.definitions['~']='[-A-Za-z0-9]';
				for(var i = 0; i < data.length; i++) {
					$('#input' + i).attr('size', data[i].blankCount);
					var blankChars = "?";
					for(var j = 0; j < data[i].blankCount; j++) {
						blankChars += '~';
					}
					//console.log("blankChars:" + blankChars);
					
					//alert("navigator.appName:" + navigator.appName);
					//alert("navigator.platform:" + navigator.platform);
					if(navigator.platform.indexOf("iPhone") >= 0 || navigator.platform.indexOf("Win") >= 0) {
						$('#input' + i).mask(blankChars);
					}
					
					//$('#input' + i).css("ime-mode", "disabled");
					//	In b<input id="input1" type="input" />
				}
				return;
				
				 //$('#input0').focus();
			}

		});
	}
	
	function ignoreWord(btnObj, wordId, index) {
		bootbox.dialog({
			message: "<span class='bigger-110'>确定要忽略这个单词(" + $("#answerSpan" + index).html() + ")一段时间吗？</span>",
			buttons: 			
			{
				"success" :
				 {
					"label" : "1个月",
					"className" : "btn-sm btn-success",
					"callback": function() {
						ignoreWordForPeriod(wordId, 30, btnObj, index);
					}
				},
				"danger" :
				{
					"label" : "3个月",
					"className" : "btn-sm btn-primary",
					"callback": function() {
						//Example.show("uh oh, look out!");
						ignoreWordForPeriod(wordId, 90, btnObj, index);
					}
				}, 
				"click" :
				{
					"label" : "永久",
					"className" : "btn-sm  btn-danger",
					"callback": function() {
						ignoreWordForPeriod(wordId, 365000, btnObj, index);
						//Example.show("Primary button");
					}
				}, 
				"button" :
				{
					"label" : "取消",
					"className" : "btn-sm"
				}
			}
		});
		
		return;
	}
	
	function ignoreWordForPeriod(wordId, days, btnObj, index) {
		$("#input" + index).val($("#answerSpan" + index).html());
		$("#input" + index).attr("readonly", true);
		$.ajax({
			type : "POST",
			url : "../../ignoreWord",
			data : {
				wordId : wordId,
				days : days
			},
			async : true,
			dataType : "text",
			success : function(data) {
				$(btnObj).hide();
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
	}
	
	function refreshTopList() {
		$.ajax({
			type : "POST",
			url : "../../getRateListForQuiz",
			data : {
				qId : qid
			},
			async : true,
			dataType : "json",
			success : function(data) {
				var rateHtml = '<table  class="table table-striped table-bordered table-hover">';
				rateHtml += "<tr>"
				rateHtml += "	<th>排名</th>"
				rateHtml += "	<th>用户</th>"
				rateHtml += "	<th>分数</th>"
				rateHtml += "</tr>"
				for(var i = 0; i < data.length; i++) {
					var username = (data[i].nickname == null || data[i].nickname == "") ? data[i].email : data[i].nickname;
					rateHtml += "<tr>"
					rateHtml += "	<td>"
					rateHtml += 		(i + 1);
					rateHtml += "	</td>"
					rateHtml += "	<td>"
					rateHtml += 		username;
					rateHtml += "	</td>"
					rateHtml += "	<td>"
					rateHtml += 		toDecimal(data[i].rate);
					rateHtml += "	</td>"
					rateHtml += "</tr>"
				}
				rateHtml += "</table>";
				//alert("rateHtml:" + rateHtml);
				$("#rateDiv").html(rateHtml);
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
	}
	
	function initQuizInfo(qid, password) {
		if(qid == "" || qid == 0) {
			$("#quizName").html("自由测试");
			$("#quizRemark").html("如果您觉得某个单词太简单或太难，可以点击<b>忽略</b>按钮忽略一段时间");
			document.title = "英语单词小测验--" + $("#quizName").html();
			return;
		}
			
		$.ajax({
			type : "POST",
			url : "../../getQuiz",
			data : {
				qId : qid,
				password : password
			},
			async : true,
			dataType : "json",
			success : function(data) {
				if(data.id == -1) {
					alert("密码错误");
					history.go(-1);
					return;
				}
				$("#quizName").html(data.name);
				$("#quizRemark").html(data.remark);
				document.title = "英语单词小测验--" + $("#quizName").html();
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
			
		refreshTopList();
	}
	
	function checkAnswer(inputIndex, blankCount) {
		var inputLength = $("#input" + inputIndex).val().replace(/\_/g, "").length; 
		if(inputLength == blankCount) {
			if($("#answerSpan" + inputIndex).html().toUpperCase() == $("#input" + inputIndex).val().toUpperCase()) {
				//console.log("right for" + inputIndex);
				$("#resultSpan" + inputIndex).html("<img src='../../assets/images/icon_good.gif' />");
				//console.log("mySwiper.activeIndex:" + mySwiper.activeIndex);
				//mySwiper.slideTo(mySwiper.activeIndex + 1, 1000, true);
				
			} else {
				//console.log("wrong for" + inputIndex);
				$("#resultSpan" + inputIndex).html("<img src='../../assets/images/icon_bad.gif' />");
			}
			$("#resultSpan" + inputIndex).show();
			
		}
	}
	
	function newOneFreeQuiz() {
		console.log("newOneFreeQuiz");
		//window.location.reload();
		//alert("here : " + window.location);
//		window.location = "ajax.html#page/freeQuiz";
		//window.location = "ajax.html?random=" + Math.random() + "#page/freeQuiz";
		
		
		fillQuizList();
		$(document).scrollTop(0);
		$("#resultDiv").html("");
		$("#submitResultDiv").html("");
		$("#newOneMoreSpan").hide();
		$("#newOneMoreSpan2").hide();
	}
	
	function backToList() {
		window.location = "ajax.html#page/quizs";
	}
	
	function checkAnswers0() {
		if(qid == "" || qid == 0) {
			checkAnswers();
		} else {
			bootbox.confirm("你只有一次提交机会哦, 确定要提交吗？", function(result) {
				if(result) {
					checkAnswers();
				}
			});
		}
		
	}
	function checkAnswers() {
		var rightCount = 0;
		var answerInfo = "";
		var resultInfo = "";
		
		$("#submitResultDiv").hide();
		
		if(qid == "") {
			$("#newOneMoreSpan").show();
			$("#newOneMoreSpan2").show();
		}
		
		
		for(var i = 0; i < totalSize; i++) {
			var oneWordId = $("#wordIdSpan" + i).html();
			var isAnswerRight = $("#input" + i).val().toUpperCase() == $("#answerSpan" + i).html().toUpperCase(); 
			if(isAnswerRight) {
				rightCount++;	
			}
			answerInfo += (oneWordId + ":" + (isAnswerRight ? 1 : 0));
			if(i != totalSize - 1) {
				answerInfo +=  ",";
			}
			
			
			if(!isAnswerRight) {
				var oneWordHtml = "";
				oneWordHtml += "<div style='margin-bottom:10px'><p>";
				oneWordHtml += "     <b>" + (i + 1) + "/" + totalSize + "</b>." + ajaxQuizData[i].sentence;
				oneWordHtml += "     </p>";
				oneWordHtml += "     <p>";
				oneWordHtml += "     " + ajaxQuizData[i].explain2;
				oneWordHtml += "     </p>";
				oneWordHtml += "     Right Answer: <span>" + $("#answerSpan" + i).html() + "</span>";
				//oneWordHtml += "     <span class='title3' onclick='toggleFork(this, " + ajaxQuizData[i].wordId + ")'>&nbsp;<i class='ace-icon glyphicon glyphicon-star-empty'></i></span>";
				oneWordHtml += "     <br/>My    Answer: <span>" + $("#input" + i).val() + "</span>";
				oneWordHtml += "     <span>" + $("#resultSpan" + i).html() + "</span>";
				oneWordHtml += "     </div>";
				resultInfo += oneWordHtml;
			}
			
		}
		
		console.log("answerInfo:" + answerInfo);
		
		resultInfo = "Correct Rate: " + rightCount + " / " + totalSize + " = " + (toDecimal(rightCount / totalSize) * 100) + "%" + resultInfo;
		$("#resultDiv").html(resultInfo);
		
		$("#prevBtn").hide();
		$("#nextBtn").hide();
		
		if(qid == "") {
			qid = 0;
		}
		
		$.ajax({
			type : "POST",
			url : "../../submitWordAnswer",
			data : {
				answerInfo : answerInfo,
				qId : qid 
			},
			async : true,
			dataType : "text",
			success : function(data) {
				$("#submitResultDiv").html(data);
				$("#submitResultDiv").show();
				refreshTopList();
				//rowData.tempRank = parseRank(newRank);
				//$("#grid-table").jqGrid('setRowData', id, rowData);
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
		
	}
	
	function toggleFork(spanObj, wordId) {
		console.log("toggleFork wordId:" + wordId);
		var forkValue = $(spanObj).html().indexOf("glyphicon-star-empty") >= 0 ? 5 : 0; 
		if(forkValue == 0) {
			$(spanObj).html("&nbsp;<i class='ace-icon glyphicon glyphicon-star-empty'></i>");
		} else {
			$(spanObj).html("&nbsp;<i class='ace-icon glyphicon glyphicon-star'></i>");
		}					
		$.ajax({
			type : "POST",
			url : "../../toggleWordFork",
			data : {
				wordId : wordId,
				forkValue : forkValue
			},
			async : true,
			dataType : "json",
			success : function(data) {
				if(data == "0") {
					alert("please login first");
				}
				//rowData.tempRank = parseRank(newRank);
				//$("#grid-table").jqGrid('setRowData', id, rowData);
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
	}
	
	function toggleForkSen(spanObj, senId) {
		console.log("toggleForkSen senId:" + senId);
		var forkValue = $(spanObj).html().indexOf("glyphicon-star-empty") >= 0 ? 5 : 0; 
		if(forkValue == 0) {
			$(spanObj).html("&nbsp;<i class='ace-icon glyphicon glyphicon-star-empty'></i>");
		} else {
			$(spanObj).html("&nbsp;<i class='ace-icon glyphicon glyphicon-star'></i>");
		}					
		$.ajax({
			type : "POST",
			url : "../../toggleForkSen",
			data : {
				senId : senId,
				forkValue : forkValue
			},
			async : true,
			dataType : "json",
			success : function(data) {
				if(data == "0") {
					alert("please login first");
				}
				//rowData.tempRank = parseRank(newRank);
				//$("#grid-table").jqGrid('setRowData', id, rowData);
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
	}
	
	function GetArgsFromHref(sHref, sArgName)
	{
	      var args    = sHref.split("?");
	      var retval = "";
	    
	      if(args[0] == sHref) /*参数为空*/
	      {
	           return retval; /*无需做任何处理*/
	      }  
	      var str = args[1];
	      args = str.split("&");
	      for(var i = 0; i < args.length; i ++)
	      {
	          str = args[i];
	          var arg = str.split("=");
	          if(arg.length <= 1) continue;
	          if(arg[0] == sArgName) retval = arg[1]; 
	      }
	      return retval;
	}

	   
</script>


